<template>
	<div :class="'coupon coupon-'+theme">
		<div class="left">
			<div class="category category-top-left" :style="'background-image: linear-gradient(to bottom, '+type[theme].angle_from+', '+type[theme].angle_to+');'+'color:'+type[theme].angle_color">
        <nobr><p class="text">{{type[theme].name}}</p></nobr>
			</div>
			<div class="category-icon category-icon-bottom-left">
				<img class="icon default" :src="type[theme].icon" :style="'opacity:'+type[theme].opacity"></img>
			</div>
			<div class="left-content">
				<div class="title">{{title}}</div>
				<div class="text">
					<nobr><p v-if="content" class="content">{{content}}</p></nobr>
					<nobr><p v-if="tip" class="tip">{{tip}}</p></nobr>
				</div>
        <div class="foot" v-if="update">
        	<div class="update">
            <nobr><p>更新时间：{{parseTimestamp(update)}}</p></nobr>
        	</div>
        </div>
			</div>
			<div class="round round-top-right"></div>
			<div class="round round-bottom-right"></div>
		</div>
		<div class="right">
			<button class="btn" shape="circle" shadow @click="handleClick">
				{{btnText}}
			</button>
			<div class="round round-top-left"></div>
			<div class="round round-bottom-left"></div>
		</div>
	</div>
</template>

<script>
	export default {
		name:"coupon-card",
		components: {
		},
		props: {
			title: {
				type: String
			},
			content: {
				type: String
			},
			tip: {
				type: String,
			},
			params: {
				type: Object
			},
			theme: {
				type: String
			},
      update: {
        type: Number
      },
      btnText: {
        type: String,
        default: "免费领取"
      }
		},
		data() {
			return {
				countdown: "",
				type: {
					mtwm: {
						"name": "美团外卖",
						"angle_color": "rgba(205, 97, 51, 1)",
						"angle_from": "rgba(248, 239, 186, 1)",
						"angle_to": "rgba(255, 221, 89, 1)",
						"icon": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-69c68e20-0de8-432d-a3c6-4ff3bc9e41b8/6fe81a9a-a098-4b37-94b9-4b369abd9c70.png",
            "opacity": 0.2,
          },
					elm: {
						"name": "饿了么",
						"icon": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-69c68e20-0de8-432d-a3c6-4ff3bc9e41b8/d267b169-117c-4a29-ac5c-2cb6bfe58420.png",
						"angle_from": "rgba(15, 188, 249, 1)",
						"angle_to": "rgba(30, 144, 255, 1)",
						"angle_color": "rgba(241, 242, 246, 1)",
            "opacity": 0.2,
					},
          bdwp: {
          	"name": "百度网盘",
          	"icon": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-69c68e20-0de8-432d-a3c6-4ff3bc9e41b8/843ded54-c760-4dde-bab6-7784921ea463.png",
          	"angle_from": "rgba(107, 156, 250, 1)",
          	"angle_to": "rgba(51, 119, 249, 1)",
          	"angle_color": "rgba(255, 255, 255, 1)",
            "opacity": 0.2,
          },
          bdwpsvip: {
          	"name": "百度网盘",
          	"icon": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a53b2bc0-86af-4019-917d-0994ec60066d/ebe626f0-bc0b-4bbb-afe7-9cb777d87b03.png",
          	"angle_from": "rgba(98, 98, 98, 1)",
          	"angle_to": "rgba(41, 41, 41, 1)",
          	"angle_color": "rgba(246, 216, 167, 1)",
            "opacity": 0.4,
          }
				}
			};
		},
		methods: {
			handleClick() {
				this.$emit('click',this.params);
			},
			// 时间戳格式化
			parseTimestamp(val) {
        let date = new Date(val)
        return `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`
      },
		}
	}
</script>

<style scoped>
	.coupon {
		display: flex;
		width: 100%;
		height: 0.6rem;
		background-color: #fff;
		border-radius: 6px;
		overflow: hidden;
	}
  .coupon-mtwm:hover {
    box-shadow: 0px 0px 4px rgba(255, 221, 89, 1);
  }
  .coupon-elm:hover {
    box-shadow: 0px 0px 4px rgba(30, 144, 255, 1);
  }
  .coupon-bdwp:hover {
    box-shadow: 0px 0px 4px rgba(51, 119, 249, 1);
  }
  .coupon-bdwpsvip:hover {
    box-shadow: 0px 0px 4px rgba(246, 216, 167, 1);
  }
	.left {
		flex: 2;
		position: relative;
		/* border-right: 2px solid #f5f6fa; */
		/* border-right-style: dotted; */
		box-sizing: border-box;
    overflow: hidden;
	}
	.right {
		flex: 1;
		position: relative;
    overflow: hidden;
	}
	.round {
		width: 0.12rem;
		height: 0.12rem;
		background-color: #f5f6fa;
		position: absolute;
	}
	.round-top-right {
		top: 0;
		right: -1px;
		border-bottom-left-radius: 0.12rem;
	}
	.round-bottom-right {
		bottom: 0;
		right: -1px;
		border-top-left-radius: 0.12rem;
	}
	.round-top-left {
		bottom: 0;
		left: -1px;
		border-top-right-radius: 0.12rem;
	}
	.round-bottom-left {
		top: 0;
		left: -1px;
		border-bottom-right-radius: 0.12rem;
	}
	.right .btn {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0.49rem;
		height: 0.19rem;
		font-size: 0.01rem;
		border-radius: 15px;
		padding: 0 0.005rem;
		/* line-height: 30px; */
		color: #f1f2f6;
		transform: translateX(-50%) translateY(-50%);
		background-image: linear-gradient(to right, #ff6b81, #ff4757)!important;
		-webkit-box-shadow: 0 5px 7px 0 rgb(255 71 87 / 20%);
		box-shadow: 0 5px 7px 0 rgb(255 71 87 / 20%);
    border-color: transparent;
	}
  .right .btn:hover {
    cursor: pointer;
    transform: translateX(-50%) translateY(-52%);
    box-shadow: 0 5px 7px 0 rgb(255 71 87 / 30%);
    transition: all ease 0.2s;
  }
	.category {
		position: absolute;
		width: 80px;
		height: 80px;
		text-align: center;
		line-height: 130px;
	}
	.category-top-left {
		top: -40px;
		left: -40px;
		transform: rotate(-45deg);
	}
	.category .text {
		display: inline-block;
		font-size: 12px;
		-webkit-transform:scale(0.8);
	}
	.category-icon {
		position: absolute;
	}
	.category-icon-bottom-left {
		bottom: -12px;
		left: -2px;
	}
	.category-icon .default {
		width: 0.3rem;
		height: 0.3rem;
	}
	.category-icon .large {
		width: 0.35rem;
		height: 0.35rem;
	}
	.left-content {
		position: absolute;
		left: 0.3rem;
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
		text-align: left;
		/* line-height: 50px; */
	}
	.left-content .title {
		color: #485460;
		font-size: 0.1rem;
		font-weight: 700;
	}
	.left-content .text {
		color: #ff4757;
	}
	.left-content .text .content {
		font-size: 0.12rem;
		font-weight: 700;
		margin-right: 8px;
    margin-bottom: 0;
	}
	.left-content .text .tip {
		/* margin-left: 16px!important; */
		display: inline;
		padding: 4px;
		background-color: #fcebef;
		color: #8a5966;
		font-size: 0.08rem;
		border-radius: 2px;
	}
  .left-content .update {
    color: #00000073;
    font-size: 0.008rem;
  }
	.left .foot {
		position: relative;
    margin-top: 10px;
	}
</style>
